<template>
	<view class="box">

		<!-- <u-navbar title="阀贸通" placeholder autoBack border></u-navbar> -->
		<!-- member_id{{ aaa }} -->
		<!-- shopid{{ bbb }} -->
		<!-- params{{ ccc }} -->
		<!-- <view class="select">
			<view v-if="select === '招标'" class="flex">
				<view class="select-option" @click="handleTab('招标')">招标</view>
				<view class="select-option" @click="handleTab('项目')">项目</view>
			</view>
			<view v-else class="flex">
				<view class="select-option opposite" @click="handleTab('招标')">招标</view>
				<view class="select-option opposite" @click="handleTab('项目')">项目</view>
			</view>
		</view> -->
		<view class="banner">
			<image class="img" mode="widthFix" src="../../static/zbhb@3x.png" :style="{ height: imgHeight + 'px' }"
				@load="onImgLoad" />
		</view>
		<view class="search">
			<u-search placeholder="搜索" bg-color="#fff" v-model="keyword" @search="search" @custom="search"
				:show-action="false" shape="square" style="width: 70%;"></u-search>
			<u-button @click="empty" type="primary" :plain="true" :hairline="true" text="细边"
				style="width: 25%; height: 32px; margin: 0 20rpx;">修改手机号</u-button>
			<!-- <button class="button" @click="value = true"></button> -->
			<button class="button" @click=" provice = true"></button>
		</view>

		<u-dropdown ref="uDropdown" activeColor="#2979ff" :borderBottom="true" style="background-color: #fff;">
			<u-dropdown-item v-model="params.catalogIds" title="项目类型" :options="optionsStage"
				@change="handleChange()"></u-dropdown-item>
			<u-dropdown-item v-model="params.provinceCode" title="区域分布" :options="optionsRegion"></u-dropdown-item>
			<!-- <u-dropdown-item title="更多选项">
				<view class="slot-content">
					<view class="item-box">
						
					</view>
					<u-button type="primary" @click="closeDropdown">确定</u-button>
				</view>
			</u-dropdown-item> -->
		</u-dropdown>

		<view class="content">
			<scroll-view height="100%" :always-scrollable-vertical="true">
				<view class="item" v-for="(item, index) in list" :key="index" @click="handledatails(item)">
					<view class="companyIntro"><rich-text :nodes="item.title"></rich-text></view>
					<view class="line"></view>
					<view class="flex flex-jc-sb flex-ai-c">
						<view class="flex">
							<!-- <view v-if="select === '招标'" class="tag" style="color: #D41E1E;background: #FFD6D6;"> 招标
							</view>
							<view v-else class="tag" style="color: #D41E1E;background: #FFD6D6;"> 项目 </view> -->
							<view class="tag" v-if="item.proviceCode" style="color: #0461FF;background: #D6E3FF;"> {{
								optionsProvice(item.proviceCode) }} </view>
						</view>
						<view class="flex flex-ai-c">
							<image src="../../static/nl@3x.png" style="width: 47rpx; height: 45rpx; margin-right: 16rpx;" />
							<view>{{ item.publish.slice(0, 11) }}</view>
						</view>
					</view>
				</view>
				<view class="item" v-if="list.length == 0">
					<u-empty text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
				</view>
			</scroll-view>
		</view>

		<city-select v-model="value" @city-change="cityChange"></city-select>
		<u-select mode="single-column" :list="optionsProviceCode" v-model="provice" @confirm="proviceConfirm"></u-select>

		<u-popup v-model="show" @close="close" mode="center" :closeable="true" style="text-align: center;"
			:mask-close-able="maskCloseAble">
			<!-- 积分不足 -->
			<view class="jfbz" v-if="content == 'jfbz'">
				<image src="../../static/jfbz@3x.png" mode="scaleToFill" />
			</view>

			<!-- 积分充足 -->
			<view class="jfcz" v-if="content == 'jfcz'">
				<image src="../../static/jfcz@3x.png" mode="scaleToFill" />
			</view>

			<!-- 温馨提示 -->
			<view class="wxts" v-if="content == 'wxts'">
				<image src="../../static/wxts@3x.png" mode="scaleToFill" />
				<text>{{ integration }}</text>
				<u-button @click="submit()" class="button" shape="square">确定</u-button>
			</view>

		</u-popup>

		<!--弹窗-->
		<u-popup mode="center" v-model="showPop" width="600rpx" height="500rpx">
			<view class="model-wraper">
				<view class="modal-title">
					需要账号绑定的手机号查看详情

				</view>
				<view class="modal-body" style="height: 200rpx;">
					<input v-model="phone" style="padding: 10rpx;font-size: 30rpx;height: 150rpx; line-height: 100rpx;" class="uni-input" focus
						placeholder="请输入账号绑定的手机号(若未绑定请先绑定手机号)" />
					<br>
				</view>
				<view>
					<view class="btn cancel" :style="{ 'color': '#666' }" @click="cancelPop">取消</view>
					<view class="btn confirm" :style="{ 'color': '#5999FF' }" @click="confirmPop">确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
import citySelect from './u-city-select.vue';
export default {
	components: {
		citySelect
	},
	data() {
		return {
			select: "招标",
			keyword: "",
			imgHeight: 0,
			// 筛选信息
			form: {},
			// 下拉框
			optionsStage: [
				{
					value:[10, 9, 318, 11, 112, 302, 303, 306, 73, 115],
					label: "招标信息"
				},
				{
					value:[75, 30, 32, 29],
					label: "项目信息"
				},
				{
					value:[15, 2],
					label: "采购信息"
				},
				{
					value:[107],
					label: "网上竞拍"
				},
				{
					value:[310],
					label: "竞争性谈判"
				},
				
			],
			// 区域下拉框
			optionsRegion: [],
			// 列表数据
			list: [],
			// 更多下拉框
			listMore: [],
			borderBottom: false,
			activeColor: '#2979ff',
			value: false,
			// 基础参数
			params: {
				currentPage: 1,
				pageSize: 10,
				// biddingStage:"",
				// biddingAddress:"",
				// biddingTitle:""
			},
			// 提示模态款
			show: false,
			provice: false,
			maskCloseAble: true,
			content: "wxts",
			integration: "",
			// 别选择的项目或招标
			item: "",
			// 总页数
			totalPage: 10,
			// 省列表
			optionsProviceCode: [{
				"label": "北京市",
				"value": "110000"
			}, {
				"label": "天津市",
				"value": "120000"
			}, {
				"label": "河北省",
				"value": "130000"
			}, {
				"label": "山西省",
				"value": "140000"
			}, {
				"label": "内蒙古自治区",
				"value": "150000"
			}, {
				"label": "辽宁省",
				"value": "210000"
			}, {
				"label": "吉林省",
				"value": "220000"
			}, {
				"label": "黑龙江省",
				"value": "230000"
			}, {
				"label": "上海市",
				"value": "310000"
			}, {
				"label": "江苏省",
				"value": "320000"
			}, {
				"label": "浙江省",
				"value": "330000"
			}, {
				"label": "安徽省",
				"value": "340000"
			}, {
				"label": "福建省",
				"value": "350000"
			}, {
				"label": "江西省",
				"value": "360000"
			}, {
				"label": "山东省",
				"value": "370000"
			}, {
				"label": "河南省",
				"value": "410000"
			}, {
				"label": "湖北省",
				"value": "420000"
			}, {
				"label": "湖南省",
				"value": "430000"
			}, {
				"label": "广东省",
				"value": "440000"
			}, {
				"label": "广西壮族自治区",
				"value": "450000"
			}, {
				"label": "海南省",
				"value": "460000"
			}, {
				"label": "重庆市",
				"value": "500000"
			}, {
				"label": "四川省",
				"value": "510000"
			}, {
				"label": "贵州省",
				"value": "520000"
			}, {
				"label": "云南省",
				"value": "530000"
			}, {
				"label": "西藏自治区",
				"value": "540000"
			}, {
				"label": "陕西省",
				"value": "610000"
			}, {
				"label": "甘肃省",
				"value": "620000"
			}, {
				"label": "青海省",
				"value": "630000"
			}, {
				"label": "宁夏回族自治区",
				"value": "640000"
			}, {
				"label": "新疆维吾尔自治区",
				"value": "650000"
			}, {
				"label": "台湾",
				"value": "660000"
			}, {
				"label": "香港",
				"value": "670000"
			}, {
				"label": "澳门",
				"value": "680000"
			}],
			phone: uni.getStorageSync('phone'),
			memberId: null,
			shopId: null,
			// 弹窗
			showPop: false
		}
	},
	onLoad(params) {
		this.content = "wxts"
		this.handleTab("招标")
		if (uni.getStorageSync('phone')) {
			this.getUserInfo()
		} else {
			this.showPop = true
		}
	},
	onReachBottom() {
		this.loadData(false)
	},
	methods: {
		// 清空手机号
		empty() {
			uni.setStorageSync('phone', '')
			this.phone = ''
			this.shopId = ""
			this.memberId = ""
			this.showPop = true
		},
		// 筛选省
		optionsProvice(item) {
			let name = ''
			this.optionsProviceCode.filter((v) => {
				if (v.value == item) {
					name = v.label
				}
			})
			// console.log(`传入:${item}，结果:${name}`)
			return name
		},
		// 搜索
		search() {
			this.params.title = this.keyword
			// 获取列表信息
			this.totalPage = 10
			this.loadData(true);
			// console.log(this.keyword)
		},
		// 加载数据
		loadData(flag) {
			// console.log(this.totalPage);
			// console.log(this.params.currentPage);

			if (this.totalPage >= this.params.currentPage) {
				// console.log(123456789);
				uni.showLoading({
					title: '加载中...',
					mask: true,
				});
				if(this.params.proviceCode){
					this.params.proviceCode=Number(this.params.proviceCode)
				}

				uni.$req.post('/famenApi/system/zhaobiao/list-paging-H5', this.params).then(res => {
					uni.hideLoading();
					if (res.code == "200") {
						this.totalPage = res.data.totalPage;
						if (flag) {
							this.list = [];
						}
						this.list.push(...res.data.totalList);
						if (res.data.totalList.length > 0) {
							this.params.currentPage++;
						}
					} else {
						this.list = [];
					}
				}).finally(() => {
					this.loadingShow = "hide";
				});

			}


		},
		// 切换
		handleTab(type) {
			this.keyword = ""
			this.select = type
			this.params = {
				currentPage: 1,
				pageSize: 10,
			};
			this.totalPage = 10;
			this.list = {}

			this.loadData(true);

		},

		onImgLoad(e) {
			/* console.log(e);
			// 当图片加载完成后，获取图片的原始宽度和高度，并根据宽度计算出高度
			const {
				width,
				height
			} = e.mp.datail;
			this.imgHeight = (height / width) * 100; // 高度 = 原始高度 / 原始宽度 * 100 */
		},

		// 更多筛选
		tagClick(index) {
			this.listMore[index].active = !this.listMore[index].active;
		},

		// 点击确定
		closeDropdown() {
			this.params.more = this.listMore.filter(item => item.active).map(item => item.label).join(',')
			// console.log(this.params.more)
			this.$refs.uDropdown.close();
			this.totalPage = 10
			// 获取列表信息
			this.loadData(true);
		},

		// 选择地区回调
		cityChange(e) {
			// this.params.biddingAddress = e.province.label + '-' + e.city.label + '-' + e.area.label;
			if (e.city.label == '市辖区') {
				e.city.label = ""
			}
			this.params.proviceCode = e.province.value
			// console.log(this.params);
			// 获取列表信息
			this.totalPage = 10
			this.loadData(true);
		},
		proviceConfirm(e) {
			this.params.provinceCode = '';
			e.map((val, index) => {
				this.params.provinceCode += this.params.provinceCode == '' ? val.value : '-' + val.value;
			})
			// 获取列表信息
			this.params.currentPage = 1
			this.totalPage = 10
			this.loadData(true);
		},

		// 阶段下拉框的回掉
		handleChange() {
			// 获取列表信息
			this.params.currentPage = 1
			this.totalPage = 10
			this.loadData(true);
		},

		// 关闭
		close() {
			// this.show=false
		},

		// 跳转详情页
		handledatails(item) {
			this.integration = `查看信息需扣除${item.integration}积分~`
			this.show = true
			this.item = item
		},

		// 点击确定
		submit() {
			// console.log(this.item);
			this.show = false
			let params = {
				"id": this.item.id,
				"memberId": this.memberId,
				"shopId": this.shopId,
			}
			uni.$req.post('/famenApi/system/integral/view3', params).then(res => {
				if (res.code == "200") {
					if (this.select == "招标") {
						console.log({
							id: res.data.id,
							token: res.data.token
						});
						uni.$u.route({
							url: "pages/opportunity/detailsBidding",
							params: {
								id: res.data.id,
								token: res.data.token
							}
						})
					} else if (this.select == "项目") {
						uni.$u.route({
							url: "pages/opportunity/detailsProject",
							params: {
								id: res.data.id,
								token: res.data.token
							}
						})
					}

				} else if (res.code == "500") {
					if (res.msg.length > 20) {
						uni.showToast({
							title: "请求错误，请重试",
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					if (res.msg != "积分不足") {
						this.showPop = true
					}
				}
			});
		},

		// 获取用户的 memberId和shopId
		getUserInfo() {
			uni.$req.post('/famenApi/system/integral/userInfo ', { phone: this.phone }).then(res => {
				if (res.code == 200) {
					this.shopId = res.data.shop_id
					this.memberId = res.data.id
					this.showPop = false
				} else if (res.code == 500) {
					uni.showToast({
						title: res.msg + ",若未绑定请先绑定手机号",
						icon: 'none'
					})
					this.phone = ""
					this.showPop = true
				}
			});
		},

		//弹窗
		confirmPop() { //确认
			uni.setStorageSync('phone', this.phone)
			this.getUserInfo()
		},
		cancelPop() {  //取消
			console.log('点击了取消')
			this.showPop = false
		},

	}
}
</script>

<style lang="scss" scoped>
.loadingShow {
	display: none;
}

.select {
	margin: 20rpx 16rpx;

	.select-option {
		width: 50%;
		height: 80rpx;
		font-size: 35rpx;
		line-height: 80rpx;
		color: #fff;
		text-align: center;
		background-image: url("../../static/zb1@3x.png");
		background-size: 100% 100%;

		&:nth-child(2) {
			background-image: url("../../static/xm1@3x.png");
			color: #474747;

		}
	}

	.opposite {
		background-image: url("../../static/zb2@3x.png");
		color: #474747;

		&:nth-child(2) {
			background-image: url("../../static/xm2@3x.png");
			color: #fff;
		}
	}
}

.banner {
	position: relative;

	.img {
		width: 100%;
	}


}

.search {
	padding: 15rpx;
	background-color: #fff6;
	position: relative;
	display: flex;

	.button {
		position: absolute;
		bottom: -80rpx;
		// width: 33%;
		// left: 50%;
		// transform: translateX(-50%);
		width: 50%;
		right: 0;
		height: 80rpx;
		z-index: 1000;
		border: none;
		outline: none;
		background-color: transparent;
	}
}

.content {
	padding: 12rpx 12rpx 0 12rpx;

	.item {
		margin-bottom: 10rpx;
		padding: 26rpx 30rpx 20rpx 24rpx;
		height: 241rpx;
		background-color: #fff;
		border-radius: 22rpx;
		cursor: pointer;

		.companyIntro {
			font-size: 29rpx;
			color: #242424;
			line-height: 43rpx;
			height: 82rpx;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
		}

		.line {
			margin: 20rpx 0;
			height: 2rpx;
			background: #A3A3A3;
		}

		.tag {
			height: 66rpx;
			line-height: 66rpx;
			padding: 0 20rpx;
			margin: 0 20rpx 0 0;
			font-size: 29rpx;
			font-family: SimHei;
			border-radius: 9rpx 9rpx 9rpx 9rpx
		}
	}
}

.u-config-wrap {
	padding: 40rpx;
}

.slot-content {
	background-color: #FFFFFF;
	padding: 24rpx;

	.item-box {
		margin-bottom: 50rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.item {
			border: 1px solid $u-type-primary;
			color: $u-type-primary;
			padding: 8rpx 40rpx;
			border-radius: 100rpx;
			margin-top: 30rpx;
		}

		.active {
			color: #FFFFFF;
			background-color: $u-type-primary;
		}
	}
}

.wxts {
	position: relative;

	>.button {
		background-image: url("../../static/button.png");

	}

	>text {
		width: 100%;
		position: absolute;
		top: 380rpx;
		left: 0rpx;
		font-size: 47rpx;
		color: #2B83BD;
		font-weight: bold;
		letter-spacing: 2px;
		font-style: italic;
	}
}

.model-wraper {
	width: 600rpx;
	background-color: #fff;
	border-radius: 16rpx;
	position: absolute;
	z-index: 1000;
	top: 50%;
	left: 50%;
	margin-top: -161rpx;
	margin-left: -300rpx;
	box-shadow: #dcdcdc 0px 0px 20rpx;
}

.modal-title {
	height: 90rpx;
	line-height: 90rpx;
	width: 100%;
	text-align: center;
	font-size: 32rpx;
	color: #666;
}

.modal-body {
	padding: 0rpx 30rpx 0rpx 30rpx;
}

.btn {
	width: 300rpx;
	height: 90rpx;
	text-align: center;
	line-height: 90rpx;
	font-size: 32rpx;
	float: left;
	border-top: 1rpx solid #ddd;
}

.btn.cancel {
	width: 299rpx;
	border-right: 1rpx solid #dcdcdc;
}
</style>